<template>
    <van-tabbar v-model="active" route>
        <van-tabbar-item replace name="home-o" icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item replace dot style="display:flex;flex-direction:column" to="/cate">
            <span>分类</span>
            <template #icon="props">
                <van-icon size="22" :name="props.active ? cate.inactive:cate.inactive"></van-icon>
                <!-- <img  :src="props.active ? icon.active : icon.inactive" /> -->
            </template>
        </van-tabbar-item>
        <van-tabbar-item replace dot style="display:flex;flex-direction:column" to="/cart">
            <span>购物车</span>
            <template #icon="props">
                <van-icon size="22" :name="props.active ? cart.inactive:cart.inactive"></van-icon>
                <!-- <img  :src="props.active ? icon.active : icon.inactive" /> -->
            </template>
        </van-tabbar-item>
        <van-tabbar-item replace name icon="friends-o" badge="5" to="/user">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            active: "home-o",
            cart:{
               inactive:"cart-o" 
            },
            cate:{
                inactive:"apps-o"
            }
        };
    },
    props: {},
    methods: {},
    components: {},
    mounted() {},
    updated() {}
};
</script>

<style scoped>
</style>
